<template>
  <el-submenu v-if="item.flag" ref="subMenu" :index="item.id+''">
    <template slot="title">
      <item  :icon="item.icon" :title="item.roleName" :id="item.id"  :flag='item.flag'/>
    </template>
    <MenuItem
      v-for="child in item.children"
      :key="child.roleName"
      :item="child"
    />
  </el-submenu>

  <el-menu-item v-else :index="item.id +'' ">
    <item  :icon="item.icon" :title="item.roleName" :id="item.id"/>
  </el-menu-item>

</template>

<script>

import Item from './Item'
export default {
  name: 'MenuItem',
  components: { Item },
  props: {
    item: {
      type: Object,
      required: true
    }
  }
}
</script>
